@use './variables' as *;

// 全局表单样式
.form-container {
  background-color: $primary-light;
  padding: $spacing-6;
  border-radius: $border-radius-lg;
  margin-bottom: $spacing-6;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: $spacing-4;

  @include respond-to('md') {
    grid-template-columns: repeat(2, 1fr);
  }

  @include respond-to('lg') {
    grid-template-columns: repeat(3, 1fr);
  }
}

.form-item {
  margin-bottom: $spacing-4;

  label {
    display: block;
    color: $primary-dark;
    font-weight: 500;
    margin-bottom: $spacing-2;

    .hint {
      font-size: $font-size-xs;
      color: $text-secondary;
      margin-left: $spacing-1;
    }
  }

  input,
  select {
    width: 100%;
    padding: $spacing-2 $spacing-3;
    border: 1px solid $border-color;
    border-radius: $border-radius;
    @include transition-base;

    &:focus {
      outline: none;
      border-color: $primary-color;
      box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
    }
  }
}

.submit-button {
  @include flex-center;
  margin-top: $spacing-4;

  button {
    background-color: $primary-color;
    color: $white;
    font-weight: bold;
    padding: $spacing-2 $spacing-6;
    border-radius: $border-radius-lg;
    box-shadow: $shadow;
    @include transition-base;
    @include flex-center;

    &:hover {
      background-color: $primary-dark;
    }

    i {
      margin-right: $spacing-2;
    }
  }
}